/*
* @Description:合约管理
* @Author: lil
* @Date: 2021/11/22
**/
<template>
  <div class="app-container">
    <!-- 表单 -->
    <el-form :inline="true" class="demo-form-inline">
      <!-- <el-form-item label="合约名称">
        <el-input v-model="contractName" placeholder="请输入合约名称"></el-input>
      </el-form-item>
      <el-form-item label="合约状态">
        <el-select v-model="value" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label">
          </el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item class="fr">
        <el-button type="primary" icon="el-icon-search" @click="findContract" size="mini">搜索</el-button>
        <el-button type="info" icon="el-icon-refresh" @click="reSet" size="mini">重置</el-button>
      </el-form-item> -->
    </el-form>
    <div class="btns mb10">
      <el-button size="mini" type="primary" class="iconfont zfsoft-wenjianshangchuan" @click="handleUpload">上传合约
      </el-button>
      <el-button size="mini" type="info" @click="dialogVisible1 = true">新建合约</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="listData" v-loading="listLoading" border tooltip-effect="dark">
      <el-table-column label="序号" type="index" width="70" align="center">
      </el-table-column>
      <el-table-column prop="nickName" label="合约名称" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="ipNum" label="合约版本" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="uName" label="结构体数量" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="status" label="合约状态" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <div v-if="scope.row.status == '未安装'" class="uninstalled">
            未安装
          </div>
          <div v-else-if="scope.row.status == '已安装未部署'" class="installedNotdeploy">
            已安装未部署
          </div>
          <div v-else-if="scope.row.status == '已部署'" class="deployed">
            已部署
          </div>
          <div v-else-if="scope.row.status == '已废弃'" class="abandoned">
            已废弃
          </div>
          <div v-else-if="scope.row.status == '已升级'" class="upgrade">
            已升级
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="upload" label="是否上传" align="center" show-overflow-tooltip v-if="false">
      </el-table-column>
      <el-table-column label="操作" width="410" align="center">
        <template slot-scope="scope">
          <el-button :disabled="scope.row.status == '已废弃'" size="mini" type="text" icon="iconfont zfsoft-xiazai"
            @click="handleInstall(scope.row.ipNum, scope.row.nickName)">安装</el-button>
          <!-- <el-button :disabled="scope.row.status != '未安装'" size="mini" type="text" icon="iconfont zfsoft-shezhi"
            @click="handleSet(scope.row.ipNum, scope.row.nickName)">设置</el-button> -->
          <el-button :disabled='scope.row.status != "未安装" || scope.row.upload =="1"' size="mini" type="text"
            icon="iconfont zfsoft-shezhi" @click="handleSet(scope.row.ipNum, scope.row.nickName)">设置</el-button>

          <el-button :disabled="scope.row.status != '已安装未部署'" size="mini" type="text"
            icon="iconfont zfsoft-shujuguanli1" @click="handleDeploy(scope.row.ipNum, scope.row.nickName)">部署
          </el-button>
          <el-button :disabled="
              scope.row.status != '已部署' && scope.row.status != '已升级'
            " size="mini" type="text" icon="iconfont zfsoft-shangyi" @click="
              handleUpgrade(
                scope.row.ipNum,
                scope.row.nickName,
                scope.row.upload
              )
            ">升级
            <!--                     icon="iconfont zfsoft-shangyi" @click="dialogVisible3=true,operationName='升级'">升级-->
          </el-button>
          <el-button :disabled="scope.row.isEmpty" size="mini" type="text" icon="iconfont zfsoft-shenchashouli"
            @click="handleShowDetail(scope.row.ipNum, scope.row.nickName)">详细
          </el-button>
          <el-button :disabled="
              scope.row.status != '未安装'
            " size="mini" type="text" icon="iconfont zfsoft-shanchu" @click="
              deleteContract(
                scope.row.nickName,
                scope.row.status,
                scope.row.ipNum,
                scope
              )
            ">删除合约</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination v-if="total>0" :current-page="pageNum" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
      @pagination="getAllCCList" />
    <!-- 弹窗：上传合约 -->
    <el-dialog v-if="dialogVisible" title="上传合约" :close-on-click-modal="false" :visible.sync="dialogVisible"
      width="40%">
      <contract-manage-upload :operation="operationName" :versionCode="currentVersion"
        :chainCodeName="currentChaincodeName" @close-dialog="closeUpload" @close-uploadDialog="closeUploadOnly">
      </contract-manage-upload>
    </el-dialog>
    <!-- 弹窗：新建合约 -->
    <el-dialog v-if="dialogVisible1" title="新建合约" :close-on-click-modal="false" :visible.sync="dialogVisible1"
      width="40%">
      <contract-manage-new @close="closeNewDLG"></contract-manage-new>
    </el-dialog>
    <!-- 弹窗：合约安装 -->
    <el-dialog v-if="dialogVisible2" title="合约安装" :close-on-click-modal="false" :visible.sync="dialogVisible2"
      width="30%">
      <contract-manage-install :versionCode="currentVersion" :chainCodeName="currentChaincodeName"
        @close="closeInstallDLG">
      </contract-manage-install>
    </el-dialog>
    <!-- 弹窗：合约设置 -->
    <el-dialog v-if="dialogVisible3" title="结构体布局器" :before-close="handleSetClose" :close-on-click-modal="false"
      class="layout-dialog" :visible.sync="dialogVisible3" width="93%">
      <contract-manage-set :operation="operationName" :versionCode="currentVersion" :toUpgrade="toUpgrade"
        :chainCodeName="currentChaincodeName" @close-dialog="closeSet" @close-Setdialog="closeSetDialog">
      </contract-manage-set>
    </el-dialog>
    <!-- 弹窗：合约部署 -->
    <el-dialog v-if="dialogVisible4" title="合约部署" :before-close="handleClose" :close-on-click-modal="false"
      :visible.sync="dialogVisible4" width="40%">
      <contract-manage-deploy @setLoading="setLoad" v-loading="isLoading" element-loading-text="合约部署中,请勿关闭弹窗"
        element-loading-background="rgba(255, 255, 255, 0.7)" :versionCode="currentVersion"
        :chainCodeName="currentChaincodeName" @close="closeSetDLG">
      </contract-manage-deploy>
    </el-dialog>
    <!-- 弹窗：合约升级 -->
    <el-dialog v-if="dialogVisible5" title="合约升级" :before-close="handleUgClose" :close-on-click-modal="false"
      :visible.sync="dialogVisible5" width="40%">
      <contract-manage-upgrade :versionCode="currentVersion" v-loading="ugLoading" :chainCodeName="currentChaincodeName"
        element-loading-text="合约升级中,请勿关闭弹窗" element-loading-background="rgba(255, 255, 255, 0.7)"
        :upload="currentUpload" @setLoading="setUgLoad" @close="closeUpdateDLG">
      </contract-manage-upgrade>
    </el-dialog>
    <!-- 弹窗：合约详情 -->
    <el-dialog v-if="dialogVisible6" title="合约详情" :close-on-click-modal="false" :visible.sync="dialogVisible6"
      width="40%">
      <contract-manage-detail :versionCode="currentVersion" :chainCodeName="currentChaincodeName"
        @close="closeDetailDLG">
      </contract-manage-detail>
    </el-dialog>
  </div>
</template>
<script>
  import contractManageUpload from "./contractManageUpload";
  import contractManageNew from "./contractManageNew";
  import contractManageInstall from "./contractManageInstall";
  import contractManageDeploy from "./contractManageDeploy";
  import contractManageUpgrade from "./contractManageUpgrade";
  import contractManageDetail from "./contractManageDetail";
  import contractManageSet from "./contractManageSet";
  import {
    getCCList,
    findChaincode,
    deleteChaincode,
  } from "@/api/blockchain/blockchaindeploy";

  export default {
    components: {
      contractManageUpload,
      contractManageNew,
      contractManageInstall,
      contractManageDeploy,
      contractManageUpgrade,
      contractManageDetail,
      contractManageSet,
    },
    data() {
      return {
        contractName: "",
        row: "",
        options: [{
            value: "0",
            label: "未安装",
          },
          {
            value: "1",
            label: "已安装未部署",
          },
          {
            value: "2",
            label: "已部署",
          },
          {
            value: "3",
            label: "已废弃",
          },
          {
            value: "4",
            label: "已升级",
          },
        ],
        value: "",
        total: null,
        listData: [],
        total: 0,
        pageSize: 10,
        pageNum: 1,
        dialogVisible: false,
        dialogVisible1: false,
        dialogVisible2: false,
        dialogVisible3: false,
        dialogVisible4: false,
        dialogVisible5: false,
        dialogVisible6: false,
        operationName: "",
        currentChaincodeName: "",
        currentVersion: "",
        currentUpload: "",
        isLoading: false,
        toUpgrade: false,
        ugLoading: false,
        listLoading: false,
      };
    },

    mounted() {
      this.initData();
    },
    methods: {
      initData() {
        this.getAllCCList();
      },
      handleClose(done) {
        if (!this.isLoading) {
          done();
        }
      },
      handleSetClose(done) {
        this.toUpgrade = false;
        done();
      },
      handleUgClose(done) {
        // if (!this.ugLoading) {
        //   done();
        // }
        this.$confirm('如果关闭窗口，之前生成的新合约将会删除，如果后续还要升级，请重新生成或者上传合约，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          closeOnClickModal: false,
          type: 'warning'
        }).then(() => {
          done();
          this.initData();
        }).catch(() => {
          return
        });
      },
      setUgLoad(val) {
        this.ugLoading = val;
      },
      setLoad(val) {
        this.isLoading = val;
      },
      getAllCCList() {
        this.listLoading = true;
        var _this = this;
        setTimeout(() => {
          getCCList(_this.pageNum, _this.pageSize)
            .then(function (res) {
              _this.listData = [];
              _this.total = res.data.total;
              for (let i = 0; i < res.data.list.length; i++) {
                _this.listData.push({
                  nickName: "",
                  ipNum: "",
                  uName: "",
                  status: "",
                  upload: "",
                });
                _this.listData[i].nickName = res.data.list[i].name;
                _this.listData[i].ipNum = res.data.list[i].version;
                _this.listData[i].uName = res.data.list[i].structNumber;
                _this.listData[i].status = res.data.list[i].status;
                _this.listData[i].upload = res.data.list[i].upload;
                _this.listData[i].isEmpty = res.data.list[i].isEmpty;
              }
              _this.listLoading = false;
            })
            .catch((err) => {
              console.log(err);
            });
        }, 1);
      },
      getTotalCCNumber() {
        let _this = this;
        getChaincodeNumber("all")
          .then(function (res) {
            _this.total = res.data;
          })
          .catch((err) => {
            console.log(err);
          });
      },
      findContract() {
        var _this = this;
        findChaincode(this.contractName, this.value)
          .then((res) => {
            this.listData = [];
            for (let i = 0; i < res.data.length; i++) {
              this.listData.push({
                nickName: "",
                ipNum: "",
                uName: "",
                status: "",
              });
              this.listData[i].nickName = res.data[i].name;
              this.listData[i].ipNum = res.data[i].version;
              this.listData[i].uName = res.data[i].structNumber;
              this.listData[i].status = res.data[i].status;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },

      deleteContract(ccname, status, version, column) {
        if (column.$index == 0 && this.pageNum != 1) {
          this.pageNum--;
        }
        this.$confirm("确认删除, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            closeOnClickModal: false,
            type: "warning",
          })
          .then(() => {
            deleteChaincode(ccname, status, version)
              .then(() => {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getAllCCList();
              })
              .catch(() => {
                this.$message({
                  type: "error",
                  message: "删除失败!",
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      closeSet() {
        this.dialogVisible3 = false;
        this.dialogVisible5 = true;
        this.toUpgrade = false;
      },
      closeSetDialog() {
        if (this.toUpgrade) {
          this.dialogVisible5 = true;
        }
        this.dialogVisible3 = false;
        this.getAllCCList();
      },
      closeNewCC() {
        this.dialogVisible1 = false;
        this.dialogVisible3 = true;
      },
      closeNewCCOnly() {
        let _this = this;
        _this.dialogVisible1 = false;
        _this.getAllCCList();
      },
      closeUpload() {
        this.dialogVisible = false;
        this.dialogVisible5 = true;
      },
      closeUploadOnly() {
        this.dialogVisible = false;
        this.getAllCCList();
      },
      handleUpload() {
        this.dialogVisible = true;
        this.operationName = "上传";
        this.currentVersion = '';
        this.currentChaincodeName = '';
      },

      handleInstall(version, name) {
        this.currentVersion = version;
        this.currentChaincodeName = name;
        this.dialogVisible2 = true;
      },
      handleSet(version, name) {
        this.currentVersion = version;
        this.currentChaincodeName = name;
        this.toUpgrade = false;
        this.dialogVisible3 = true;
        this.operationName = "保存并提交";
      },
      handleDeploy(version, name) {
        this.currentVersion = version;
        this.currentChaincodeName = name;
        this.dialogVisible4 = true;
      },
      handleUpgrade(version, name, upload) {
        this.currentUpload = upload;
        this.currentVersion = version;
        this.currentChaincodeName = name;
        if (upload == "1") {
          this.dialogVisible = true;
        } else {
          this.toUpgrade = true;
          this.dialogVisible3 = true;
        }
        this.operationName = "保存并提交";
      },
      handleShowDetail(version, name) {
        this.currentVersion = version;
        this.currentChaincodeName = name;
        this.dialogVisible6 = true;
      },
      reSet() {
        this.value = "";
        this.getAllCCList();
      },
      closeDetailDLG() {
        this.dialogVisible6 = false;
        this.getAllCCList();
      },
      closeInstallDLG() {
        this.dialogVisible2 = false;
        this.getAllCCList();
      },
      closeUploadDLG() {
        this.dialogVisible = false;
        this.getAllCCList();
      },
      closeNewDLG(val) {
        if (val === 0) {
          this.dialogVisible1 = false;
          this.getAllCCList();
        } else {
          this.dialogVisible1 = false;
          this.dialogVisible3 = true;
          this.getAllCCList();
        }
        this.operationName = "保存并提交";
      },
      closeSetDLG() {
        this.dialogVisible4 = false;
        this.getAllCCList();
      },
      closeUpdateDLG() {
        this.toUpgrade = false;
        this.dialogVisible5 = false;
        this.getAllCCList();
      },
    },
  };

</script>
<style lang="scss" scoped>
  .uninstalled {
    color: #ffb821;
  }

  .installedNotdeploy {
    color: #2ad8bd;
  }

  .deployed {
    color: #25df3f;
  }

  .abandoned {
    color: #353535;
  }

  .upgrade {
    color: #353535;
  }

  .layout-dialog {
    &>>>.el-dialog__body {
      padding: 0;
    }
  }

  // .el-pagination {
  //   margin: 30px 0px 0px 0px;
  //   text-align: center;
  // }

</style>
